<div class="modal-content" ng-class="{active: isCurrentTab('metadata')}" data-modal-tab-content="metadata" data-level="1">
  <div class="modal-body">
    <div class="full-col">
      <div class="obj tbl-list">
        <header class="no-expand" translate="EVENTS.EVENTS.NEW.METADATA.CAPTION">
          <!-- Metadata -->
        </header>
        <div class="obj-container">
          <form novalidate name="outerForm">
            <table class="main-tbl">
              <tr ng-repeat="row in wizard.step.metadata['dublincore/episode'].fields">
                <td>
                  <span translate="{{ row.label }}"></span>
                  <i ng-show="row.required" class="required">*</i>
                </td>
                <td admin-ng-editable
                    class="editable" name="row.id"
                                     target="dublincore/episode"
                                     params="row" save="$parent.wizard.save"
                                     sanitize-xml="row.value" ng-model="row.value">
                </td>
              </tr>
            </table>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>


<div class="modal-content" ng-if="wizard.step.visible" ng-class="{active: isCurrentTab('metadata-extended')}" data-modal-tab-content="metadata-extended" data-level="1">
  <div class="modal-body">
    <div class="full-col">
      <div class="obj tbl-details" ng-repeat="(name, block) in wizard.step.ud">
        <header>{{ name }}</header>
        <div class="obj-container">
          <form novalidate name="outerForm">
            <table class="main-tbl">
              <tr ng-repeat="row in block.fields">
                <td>{{ row.label | translate }} <i ng-show="row.required" class="required">*</i></td>
                <td admin-ng-editable
                    class="editable" name="row.id" target="{{name}}"
                                                   params="row" save="$parent.wizard.save"
                                                   sanitize-xml="row.value" ng-model="row.value">
                </td>
              </tr>
            </table>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal-content" data-modal-tab-content="source" data-level="1">
  <div class="modal-body">
    <div class="full-col">
      <div data-admin-ng-notifications="" context="events-form"></div>
      <table ng-show="wizard.step.conflicts.length > 0" class="main-tbl scheduling-conflict">
        <tr ng-repeat="conflict in wizard.step.conflicts">
          <td>{{ conflict.title }}</td>
          <td>{{ conflict.start }}</td>
          <td>{{ conflict.end }}</td>
        </tr>
      </table>
      <div class="obj list-obj" ng-if="(wizard.step.captureAgents | filter:wizard.step.hasAgentAccess).length > 0">
        <header class="no-expand" translate="EVENTS.EVENTS.NEW.SOURCE.SELECT_SOURCE">
          <!-- Select Source -->
        </header>
        <div class="obj-container">
          <ul>
            <li>
              <label>
                <input ng-model="wizard.step.ud.type" type="radio" name="source-toggle"
                                                                   class="source-toggle" value="UPLOAD" data-upload-type="UPLOAD"
                                                                                                        ng-change="wizard.step.changeType()"
                                                                                                        ng-checked="true" focushere tabindex="1">
                <span translate="EVENTS.EVENTS.NEW.SOURCE.UPLOAD.CAPTION"><!-- Upload --></span>
              </label>
            </li>
            <li>
              <label>
                <input ng-model="wizard.step.ud.type" type="radio" name="source-toggle"
                                                                   class="source-toggle" value="SCHEDULE_SINGLE" data-upload-type="SCHEDULE_SINGLE"
                                                                                                                 ng-change="wizard.step.changeType()">
                <span translate="EVENTS.EVENTS.NEW.SOURCE.SCHEDULE_SINGLE.CAPTION">
                  <!-- Schedule Single Event -->
                </span>
              </label>
            </li>
            <li>
              <label>
                <input ng-model="wizard.step.ud.type" type="radio" name="source-toggle"
                                                                   class="source-toggle" value="SCHEDULE_MULTIPLE" data-upload-type="SCHEDULE_MULTIPLE"
                                                                                                                   ng-change="wizard.step.changeType()">
                <span translate="EVENTS.EVENTS.NEW.SOURCE.SCHEDULE_MULTIPLE.CAPTION">
                  <!-- Schedule Multiple Events -->
                </span>
              </label>
            </li>
          </ul>
        </div>
      </div>

      <!-- Track source upload options are dynamically defined in listproviders event.upload.asset.options.properties -->
      <div class="obj list-obj source-type-content" data-upload-type-content="UPLOAD" ng-class="{active: wizard.step.ud.type === 'UPLOAD'}">
        <header class="no-expand" translate="EVENTS.EVENTS.NEW.SOURCE.UPLOAD.RECORDING_ELEMENTS">
          <!-- Recording Elements -->
        </header>
        <div class="obj-container">
          <ul>
            <li ng-repeat="asset in wizard.sharedData.uploadAssetOptions | filter: {showAs: 'source'} | orderBy: 'displayOrder' track by asset.id">
              <div class="file-upload">
                <input
                  id="{{asset.id}}"
                  class="blue-btn file-select-btn"
                  admin-ng-file-upload
                  accept="{{asset.accept}}"
                  data-ng-file-select
                  data-ng-multiple="asset.multiple"
                  type="file"
                  file="$parent.wizard.step.ud.UPLOAD.tracks.{{asset.id}}"
                  tabindex="" />
              </div>
              <span>{{asset | translateOverrideFallback: 'SHORT'}}</span>
              <span class="ui-helper-hidden"> ({{asset.type}} "{{asset.flavorType}}/{{asset.flavorSubType}}")</span>
              <p>{{asset | translateOverrideFallback: 'DETAIL'}}</p>
            </li>
          </ul>
        </div>
      </div>
      <div class="obj list-obj source-type-content" data-upload-type-content="UPLOAD" ng-class="{active: wizard.step.ud.type === 'UPLOAD'}">
        <header class="no-expand" translate="EVENTS.EVENTS.NEW.SOURCE.UPLOAD.RECORDING_METADATA">
          <!-- Recording Elements -->
        </header>
        <div class="obj-container">
          <form novalidate name="outerForm">
            <table class="main-tbl">
              <tr ng-repeat="row in wizard.step.ud.UPLOAD.metadata">
                <td>
                  <span translate="{{ row.label }}"></span>
                  <i ng-show="row.required" class="required">*</i>
                </td>
                <td admin-ng-editable
                    class="editable" name="row.id"
                                     target="dublincore/episode"
                                     params="row" save="$parent.wizard.save">
                </td>
              </tr>
            </table>
          </form>
        </div>
      </div>

      <div class="obj source-type-content" data-upload-type-content="SCHEDULE_SINGLE" ng-class="{active: wizard.step.ud.type === 'SCHEDULE_SINGLE'}">
        <header translate="EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.CAPTION"><!-- Date / Time --></header>
        <div class="obj-container">
          <table class="main-tbl">
            <tr>
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.TIMEZONE' | translate }}</td>
              <td>{{ wizard.step.tz }}</td>
            </tr>
            <tr>
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_DATE' | translate }} <i class="required">*</i></td>
              <td>
                <input datepicker
                       type="text"
                       tabindex="4"
                       ng-disabled="wizard.step.checkingConflicts"
                       placeholder="{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.START_DATE' | translate }}"
                       ng-model="wizard.step.ud.SCHEDULE_SINGLE.start.date"
                       ng-change="wizard.step.onTemporalValueChange('start')" />
              </td>
            </tr>
            <tr>
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_TIME' | translate }} <i class="required">*</i></td>
              <td>
                <select chosen
                        data-width="'100px'"
                        tabindex="5"
                        ng-disabled="wizard.step.checkingConflicts"
                        ng-model="wizard.step.ud.SCHEDULE_SINGLE.start.hour" ng-change="wizard.step.onTemporalValueChange('start')"
                                                                             placeholder-text-single="'{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.HOUR' | translate }}'"
                                                                             ng-options="h.index as h.value for h in wizard.step.hours"
                                                                             >
                                                                             <option value=""></option>
                </select>
                <select chosen
                        data-width="'100px'"
                        tabindex="6"
                        ng-disabled="wizard.step.checkingConflicts"
                        ng-model="wizard.step.ud.SCHEDULE_SINGLE.start.minute" ng-change="wizard.step.onTemporalValueChange('start')"
                                                                               placeholder-text-single="'{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.MINUTE' | translate }}'"
                                                                               ng-options="m.index as m.value for m in wizard.step.minutes"
                                                                               >
                                                                               <option value=""></option>
                </select>
              </td>
            </tr>
            <tr>
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.DURATION' | translate }} <i class="required">*</i></td>
              <td>
                <select chosen
                        data-width="'100px'"
                        tabindex="7"
                        ng-disabled="wizard.step.checkingConflicts"
                        ng-model="wizard.step.ud.SCHEDULE_SINGLE.duration.hour" ng-change="wizard.step.onTemporalValueChange('duration')"
                                                                                placeholder-text-single="'{{ 'WIZARD.DURATION.HOURS' | translate }}'"
                                                                                ng-options="h.index as h.value for h in wizard.step.hours"
                                                                                >
                                                                                <option value=""></option>
                </select>
                <select chosen
                        data-width="'100px'"
                        tabindex="8"
                        ng-disabled="wizard.step.checkingConflicts"
                        ng-model="wizard.step.ud.SCHEDULE_SINGLE.duration.minute" ng-change="wizard.step.onTemporalValueChange('duration')"
                                                                                  placeholder-text-single="'{{ 'WIZARD.DURATION.MINUTES' | translate }}'"
                                                                                  ng-options="m.index as m.value for m in wizard.step.minutes"
                                                                                  >
                                                                                  <option value=""></option>
                </select>
              </td>
            </tr>
            <tr>
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.END_TIME' | translate }} <i class="required">*</i></td>
              <td>
                <select chosen
                        data-width="'100px'"
                        tabindex="9"
                        ng-disabled="wizard.step.checkingConflicts"
                        ng-model="wizard.step.ud.SCHEDULE_SINGLE.end.hour" ng-change="wizard.step.onTemporalValueChange('end')"
                                                                           placeholder-text-single="'{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.HOUR' | translate }}'"
                                                                           ng-options="h.index as h.value for h in wizard.step.hours"
                                                                           >
                                                                           <option value=""></option>
                </select>
                <select chosen
                        data-width="'100px'"
                        tabindex="10"
                        ng-disabled="wizard.step.checkingConflicts"
                        ng-model="wizard.step.ud.SCHEDULE_SINGLE.end.minute" ng-change="wizard.step.onTemporalValueChange('end')"
                                                                             placeholder-text-single="'{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.MINUTE' | translate }}'"
                                                                             ng-options="m.index as m.value for m in wizard.step.minutes"
                                                                             >
                                                                             <option value=""></option>
                </select>
                <span ng-bind="wizard.step.ud.SCHEDULE_SINGLE.end.date"
                      ng-show="wizard.step.ud.SCHEDULE_SINGLE.end.date !== wizard.step.ud.SCHEDULE_SINGLE.start.date"
                      ></span>
              </td>
            </tr>
            <tr>
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.LOCATION' | translate }} <i class="required">*</i></td>
              <td>
                <select chosen
                        data-width="'203px'"
                        tabindex="11"
                        ng-disabled="wizard.step.checkingConflicts"
                        ng-change="wizard.step.roomChanged(); wizard.step.checkConflicts()"
                        ng-model="wizard.step.ud.SCHEDULE_SINGLE.device"
                        ng-options="ca.name for ca in wizard.step.captureAgents | filter:wizard.step.hasAgentAccess track by ca.id"
                        placeholder-text-single="'{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.LOCATION' | translate }}'"
                        >
                        <option value=""></option>
                </select>
              </td>
            </tr>
            <tr ng-if="wizard.step.ud.SCHEDULE_SINGLE.device.inputs.length">
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.INPUTS' | translate }}</td>
              <td>
                <label ng-repeat="inputMethod in wizard.step.ud.SCHEDULE_SINGLE.device.inputs">
                  <input type="checkbox"
                         ng-model="wizard.step.ud.SCHEDULE_SINGLE.device.inputMethods[inputMethod.id]"
                         tabindex="12">
                  {{ inputMethod.id | translate }}
                  <br>
                </label>
              </td>
            </tr>
          </table>
        </div>
      </div>

      <div class="obj source-type-content" data-upload-type-content="SCHEDULE_MULTIPLE" ng-class="{active: wizard.step.ud.type === 'SCHEDULE_MULTIPLE'}">
        <header translate="EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.CAPTION"><!-- Date / Time --></header>
        <div class="obj-container">
          <table class="main-tbl">
            <tr>
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.TIMEZONE' | translate }}</td>
              <td>{{ wizard.step.tz }}</td>
            </tr>
            <tr>
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_DATE' | translate }} <i class="required">*</i></td>
              <td>
                <input type="text" tabindex="4" placeholder="{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.START_DATE' | translate }}"  datepicker ng-model="wizard.step.ud.SCHEDULE_MULTIPLE.start.date" ng-change="wizard.step.onTemporalValueChange('start')">
              </td>
            </tr>
            <tr>
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.END_DATE' | translate }} <i class="required">*</i></td>
              <td>
                <input type="text" tabindex="5" placeholder="{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.END_DATE' | translate }}"  datepicker ng-model="wizard.step.ud.SCHEDULE_MULTIPLE.end.date" ng-change="wizard.step.onTemporalValueChange('end')">
              </td>
            </tr>
            <tr>
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.SCHEDULE_MULTIPLE.REPEAT_ON' | translate }} <i class="required">*</i></td>
              <td>
                <div ng-repeat="weekday in wizard.step.sortedWeekdays" class="day-check-container">{{ weekday.translation | translate }}
                  <br>
                  <input
                    type="checkbox"
                    ng-model="wizard.step.ud.SCHEDULE_MULTIPLE.weekdays[weekday.key]"
                    ng-change="wizard.step.checkConflicts()"
                    />
                </div>

              </td>
            </tr>
            <tr>
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_TIME' | translate }} <i class="required">*</i></td>
              <td>
                <select chosen
                        data-width="'100px'"
                        tabindex="7"
                        ng-disabled="wizard.step.checkingConflicts"
                        ng-model="wizard.step.ud.SCHEDULE_MULTIPLE.start.hour"
                        ng-change="wizard.step.onTemporalValueChange('start')"
                        placeholder-text-single="'{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.HOUR' | translate }}'"
                        ng-options="h.index as h.value for h in wizard.step.hours"
                        >
                        <option value=""></option>
                </select>
                <select chosen
                        data-width="'100px'"
                        tabindex="8"
                        ng-disabled="wizard.step.checkingConflicts"
                        ng-model="wizard.step.ud.SCHEDULE_MULTIPLE.start.minute"
                        ng-change="wizard.step.onTemporalValueChange('start')"
                        placeholder-text-single="'{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.MINUTE' | translate }}'"
                        ng-options="m.index as m.value for m in wizard.step.minutes"
                        >
                        <option value=""></option>
                </select>
              </td>
            </tr>
            <tr>
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.DURATION' | translate }} <i class="required">*</i></td>
              <td>
                <select chosen
                        ng-disabled="wizard.step.checkingConflicts"
                        data-width="'100px'"
                        tabindex="9"
                        ng-model="wizard.step.ud.SCHEDULE_MULTIPLE.duration.hour"
                        ng-change="wizard.step.onTemporalValueChange('duration')"
                        placeholder-text-single="'{{ 'WIZARD.DURATION.HOURS' | translate }}'"
                        ng-options="h.index as h.value for h in wizard.step.hours"
                        >
                        <option value=""></option>
                </select>
                <select chosen
                        ng-disabled="wizard.step.checkingConflicts"
                        data-width="'100px'"
                        tabindex="10"
                        ng-model="wizard.step.ud.SCHEDULE_MULTIPLE.duration.minute"
                        ng-change="wizard.step.onTemporalValueChange('duration')"
                        placeholder-text-single="'{{ 'WIZARD.DURATION.MINUTES' | translate }}'"
                        ng-options="m.index as m.value for m in wizard.step.minutes"
                        >
                        <option value=""></option>
                </select>
              </td>
            </tr>
            <tr>
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.END_TIME' | translate }} <i class="required">*</i></td>
              <td>
                <select chosen
                        data-width="'100px'"
                        tabindex="15"
                        ng-disabled="wizard.step.checkingConflicts"
                        ng-model="wizard.step.ud.SCHEDULE_MULTIPLE.end.hour"
                        ng-change="wizard.step.onTemporalValueChange('end')"
                        placeholder-text-single="'{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.HOUR' | translate }}'"
                        ng-options="h.index as h.value for h in wizard.step.hours"
                        >
                        <option value=""></option>
                </select>
                <select chosen
                        data-width="'100px'"
                        tabindex="16"
                        ng-disabled="wizard.step.checkingConflicts"
                        ng-model="wizard.step.ud.SCHEDULE_MULTIPLE.end.minute"
                        ng-change="wizard.step.onTemporalValueChange('end')"
                        placeholder-text-single="'{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.MINUTE' | translate }}'"
                        ng-options="m.index as m.value for m in wizard.step.minutes"
                        >
                        <option value=""></option>
                </select>
              </td>
            </tr>
            <tr>
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.LOCATION' | translate }} <i class="required">*</i></td>
              <td>
                <select chosen
                        ng-disabled="wizard.step.checkingConflicts"
                        data-width="'203px'"
                        tabindex="19"
                        ng-change="wizard.step.roomChanged(); wizard.step.checkConflicts()"
                        ng-model="wizard.step.ud.SCHEDULE_MULTIPLE.device"
                        ng-options="ca.name for ca in wizard.step.captureAgents | filter:wizard.step.hasAgentAccess track by ca.id"
                        placeholder-text-single="'{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.LOCATION' | translate }}'"
                        >
                        <option value=""></option>
                </select>
              </td>
            </tr>
            <tr ng-if="wizard.step.ud.SCHEDULE_MULTIPLE.device.inputs.length">
              <td>{{ 'EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.INPUTS' | translate }}</td>
              <td>
                <label ng-repeat="inputMethod in wizard.step.ud.SCHEDULE_MULTIPLE.device.inputs">
                  <input type="checkbox" ng-model="wizard.step.ud.SCHEDULE_MULTIPLE.device.inputMethods[inputMethod.id]" tabindex="20" />
                  {{ inputMethod.id | translate }}
                </label>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- Asset upload  -->
<div class="modal-content" ng-if="wizard.step.visible" ng-class="{active: isCurrentTab('upload-asset')}" data-modal-tab-content="upload-asset" data-level="1">
  <div class="modal-body">
    <div class="full-col">
      <div class="obj tbl-details">
        <header translate="EVENTS.EVENTS.NEW.UPLOAD_ASSET.SELECT_TYPE"></header>
        <div class="obj-container">
          <div ng-if="$parent.wizard.sharedData.uploadAssetOptions">
            <div admin-ng-upload-asset assetoptions="$parent.wizard.sharedData.uploadAssetOptions"
                                       filebindcontainer="$parent.wizard.step.ud.assets"
                                       onexitscope="$parent.wizard.step.onAssetUpdate" >
                                       <!-- adminNgUploadAsset directive used for asset upload selection -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal-content" data-modal-tab-content="processing" data-level="1">
  <div class="modal-body">
    <div class="full-col">
      <div class="obj quick-actions">
        <header class="no-expand" translate="EVENTS.EVENTS.NEW.PROCESSING.SELECT_WORKFLOW">
          <!-- Select Workflow -->
        </header>
        <div class="obj-container padded">
          <select chosen pre-select-from="wizard.step.workflows"
                         ng-disabled="wizard.step.changingWorkflow"
                         data-width="'100%'"
                         tabindex="1"
                         focushere
                         ng-change="wizard.step.changeWorkflow()"
                         ng-model="wizard.step.ud.workflow"
                         ng-options="w.title for (obj, w) in wizard.step.workflows |
                                     filter: wizard.getStateControllerByName('source').ud.type === 'UPLOAD'
                                       ? 'upload' : 'schedule' |
                                     orderBy: 'displayOrder':true track by w.id"
                         placeholder-text-single="'{{ 'EVENTS.EVENTS.NEW.PROCESSING.SELECT_WORKFLOW' | translate }}'"
                         no-results-text="'{{ 'EVENTS.EVENTS.NEW.PROCESSING.SELECT_WORKFLOW_EMPTY' | translate }}'"
                         >
                         <option value=""></option>
          </select>
		  <div class="collapsible-box" input="wizard.step.workflowDescription" maxheight=45></div>
          <div id="new-event-workflow-configuration"
               ng-click="wizard.step.save()"
               ng-bind-html="wizard.step.workflowConfiguration"
               class="obj-container">
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal-content" data-modal-tab-content="access" data-level="1" with-role="ROLE_UI_EVENTS_DETAILS_ACL_VIEW">
  <div class="modal-body">
    <div class="full-col">
      <div data-admin-ng-notifications="" context="events-access"></div>
      <ul>
        <li>
          <div class="obj list-obj">
            <header class="no-expand" translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.TITLE">
              <!-- Title -->
            </header>
            <div class="obj-container">
              <p translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.DESCRIPTION">
              <!-- Description -->
              </p>
              <div class="obj tbl-list">

                <table class="main-tbl">
                  <thead>
                    <tr>
                      <th translate="EVENTS.SERIES.NEW.ACCESS.TEMPLATES.TITLE">
                        <!-- Templates -->
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                    <tr>
                      <td>
                        <div class="obj-container padded">
                          <select chosen
                                  data-width="'200px'"
                                  tabindex="1"
                                  focushere
                                  ng-change="wizard.step.changeBaseAcl(wizard.step.ud.id)"
                                  ng-model="wizard.step.ud.id"
                                  ng-options="id as name for (id, name) in wizard.step.acls"
                                  placeholder-text-single="'{{ 'EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.LABEL' | translate }}'"
                                  no-results-text="'{{ 'EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.EMPTY' | translate }}'"
                                  ></select>
                        </div>
                      </td>
                    </tr>
                  </tbody>
                </table>
              </div>
            </div>

            <div class="obj-container" ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_USER_ROLES_VIEW')">
              <div class="obj tbl-list">
                <header translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.USERS">
                  <!-- Details -->
                </header>
                <div class="obj-container">
                  <table class="main-tbl">
                    <thead>
                      <tr>
                        <th translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.USER">
                          <!-- User -->
                        </th>
                        <th class="fit">
                          <!-- Read -->
                          {{ 'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.READ' | translate }}
                          <span title="{{ 'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.HELP.READ' | translate}}"
                                class="fa fa-question-circle">
                          </span>
                        </th>
                        <th class="fit">
                          <!-- Write -->
                          {{ 'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.WRITE' | translate }}
                          <span title="{{ 'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.HELP.WRITE' | translate}}"
                                class="fa fa-question-circle">
                          </span>
                        </th>
                        <th translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS"
                            class="fit" ng-if="wizard.step.hasActions">
                          <!-- Additional Actions -->
                        </th>
                        <th translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.ACTION" class="fit">
                          <!-- Action -->
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr ng-repeat="policy in wizard.step.ud.policiesUser">
                        <td>
                          <select chosen
                                  data-width="'360px'"
                                  ng-model="policy.role"
                                  ng-options="user.userRole as wizard.step.userToStringForDetails(user) for user in wizard.step.users"
                                  call-on-search="wizard.step.getMatchingRoles"
                                  placeholder-text-single="'{{ 'EVENTS.EVENTS.DETAILS.ACCESS.USERS.LABEL' | translate }}'"
                                  no-results-text="'{{ 'EVENTS.EVENTS.DETAILS.ACCESS.USERS.EMPTY' | translate }}'">
                            <option value=""></option>
                          </select>
                        </td>
                        <td class="fit text-center"><input type="checkbox"  ng-model="policy.read" ng-disabled="wizard.step.aclCreateDefaults['read_readonly']"/></td>
                        <td class="fit text-center"><input type="checkbox"  ng-model="policy.write" ng-disabled="wizard.step.aclCreateDefaults['write_readonly']"/></td>
                        <td class="fit editable" ng-if="wizard.step.hasActions">
                          <div admin-ng-editable-multi-select mixed="false"
                                                              params="policy.actions"
                                                              collection="wizard.step.actions">
                          </div>
                        </td>
                        <td class="fit"><a ng-click="wizard.step.deletePolicy(wizard.step.ud.policiesUser, policy)" class="remove"></a>
                        </td>
                      </tr>
                      <tr ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')">
                        <td colspan="5"><a ng-click="wizard.step.addPolicy(wizard.step.ud.policiesUser)">+ {{ 'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.NEW_USER' | translate }}</a></td>
                        <tr>
                        </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
            <div class="obj-container" ng-if="$root.userIs('ROLE_UI_EVENTS_DETAILS_ACL_NONUSER_ROLES_VIEW')">
              <div class="obj tbl-list">
                <header translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.DETAILS">
                  <!-- Details -->
                </header>
                <div class="obj-container">
                  <table class="main-tbl">
                    <thead>
                      <tr>
                        <th translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.ROLE">
                          <!-- Role -->
                        </th>
                        <th translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.READ" class="fit">
                          <!-- Read -->
                        </th>
                        <th translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.WRITE" class="fit">
                          <!-- Write -->
                        </th>
                        <th translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS"
                            class="fit" ng-if="wizard.step.hasActions">
                          <!-- Additional Actions -->
                        </th>
                        <th translate="EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.ACTION" class="fit">
                          <!-- Action -->
                        </th>
                      </tr>
                    </thead>
                    <tbody>
                      <tr ng-repeat="policy in wizard.step.ud.policies">
                        <td>
                          <select chosen
                                  data-width="'360px'"
                                  ng-model="policy.role"
                                  ng-options="role as role for role in wizard.step.roles | filter: wizard.step.filterUserRoles"
                                  call-on-search="wizard.step.getMatchingRoles"
                                  placeholder-text-single="'{{ 'EVENTS.EVENTS.DETAILS.ACCESS.ROLES.LABEL' | translate }}'"
                                  no-results-text="'{{ 'EVENTS.EVENTS.DETAILS.ACCESS.ROLES.EMPTY' | translate }}'">
                            <option value=""></option>
                          </select>
                        </td>
                        <td class="fit text-center"><input type="checkbox"  ng-model="policy.read" ng-disabled="wizard.step.aclCreateDefaults['read_readonly']"/></td>
                        <td class="fit text-center"><input type="checkbox"  ng-model="policy.write" ng-disabled="wizard.step.aclCreateDefaults['write_readonly']"/></td>
                        <td class="fit editable" ng-if="wizard.step.hasActions">
                          <div admin-ng-editable-multi-select mixed="false"
                                                              params="policy.actions"
                                                              collection="wizard.step.actions">
                          </div>
                        </td>
                        <td class="fit"><a ng-click="wizard.step.deletePolicy(wizard.step.ud.policies, policy)" class="remove"></a>
                        </td>
                      </tr>
                      <tr ng-if="$root.userIs('ROLE_UI_SERIES_DETAILS_ACL_EDIT')">
                        <td colspan="5"><a ng-click="wizard.step.addPolicy(wizard.step.ud.policies)">+ {{ 'EVENTS.EVENTS.DETAILS.ACCESS.ACCESS_POLICY.NEW' | translate }}</a></td>
                        <tr>
                        </tr>
                    </tbody>
                  </table>
                </div>
              </div>
            </div>

          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

<div class="modal-content" data-modal-tab-content="summary" data-level="1">
  <div class="modal-body">
    <div class="full-col">
      <div data-admin-ng-notifications="" context="events-form"></div>

      <div class="obj tbl-list">
        <header class="no-expand" translate="EVENTS.EVENTS.NEW.METADATA.CAPTION"><!-- Metadata --></header>
        <div class="obj-container">
          <table class="main-tbl">
            <tr ng-repeat="userEntry in wizard.states[0].stateController.getUserEntries()" ng-if="userEntry.presentableValue">
              <td>{{ userEntry.label | translate }}</td>
              <td>{{ userEntry.presentableValue | translate }}</td>
              <tr>
          </table>
        </div>
      </div>

      <div class="obj tbl-list" ng-if="wizard.getStateControllerByName('metadata-extended').getFiledCatalogs().length > 0">
        <header class="no-expand" translate="EVENTS.EVENTS.NEW.METADATA_EXTENDED.CAPTION">
          <!-- Metadata Extended -->
        </header>
        <div class="obj-container">
          <table class="main-tbl" ng-repeat="(name, block) in wizard.getStateControllerByName('metadata-extended').getFiledCatalogs()">
            <tr ng-repeat="field in block.fields" ng-if="field.presentableValue">
              <td>{{ field.label | translate }}</td>
              <td>{{ (field.presentableValue | translate) || field.presentableValue  }}</td>
              <tr>
          </table>
        </div>
      </div>
      <!-- Show uploaded assets in the summary -->
      <div class="obj tbl-list" ng-if="wizard.getStateControllerByName('upload-asset').hasAssetUploads()">
        <header class="no-expand" translate="EVENTS.EVENTS.NEW.UPLOAD_ASSET.CAPTION">
          <!-- Metadata Extended -->
        </header>
        <div class="obj-container">
          <table class="main-tbl" ng-repeat="item in wizard.getStateControllerByName('upload-asset').getAssetUploadSummary() track by item.id">
            <tr>
              <td>{{ item.title | translate }}
                <span class="ui-helper-hidden"> ({{asset.type}} "{{asset.flavorType}}/{{asset.flavorSubType}}")</span>
              </td>
              <td>{{ item.filename }}</td>
              <tr>
          </table>
        </div>
      </div>
      <div class="obj tbl-list">
        <header class="no-expand" translate="EVENTS.EVENTS.NEW.SOURCE.CAPTION"><!-- Source --></header>
        <div class="obj-container">
          <!-- uploaded track types are dynamically defined. -->
          <table class="main-tbl" ng-if="wizard.getStateControllerByName('source').getUserEntries().type === 'UPLOAD'"
                                  ng-repeat="item in wizard.getStateControllerByName('source').getTrackUploadSummary() track by item.id">
            <tr>
              <td>{{ item.title + '.SHORT' | translate }}
                <span class="ui-helper-hidden">({{asset.type}} "{{asset.flavorType}}/{{asset.flavorSubType}}")</span>
              </td>
              <td>{{ item.filename }}</td>
            </tr>
          </table>
          <!-- scheduled items -->
          <table class="main-tbl">

            <!-- Start date upload -->
            <tr ng-if="wizard.getStateControllerByName('source').getUserEntries()[wizard.getStateControllerByName('source').getUserEntries().type].metadata.start">
              <td translate="EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_DATE"><!-- Start Date --></td>
              <td>{{ wizard.getStateControllerByName('source').getUserEntries()[wizard.getStateControllerByName('source').getUserEntries().type].metadata.start.value | localizeDate:'dateRaw' }}</td>
            </tr>

            <!-- Start date schedule -->
            <tr ng-if="wizard.getStateControllerByName('source').getUserEntries()[wizard.getStateControllerByName('source').getUserEntries().type].start.date">
              <td translate="EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_DATE"><!-- Start Date --></td>
              <td>{{ wizard.getStateControllerByName('source').getUserEntries()[wizard.getStateControllerByName('source').getUserEntries().type].start.date | localizeDate:'dateRaw' }}</td>
            </tr>

            <tr ng-if="wizard.getStateControllerByName('source').getUserEntries()[wizard.getStateControllerByName('source').getUserEntries().type].start.hour !== undefined">
              <td translate="EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.START_TIME"><!-- Start Time --></td>
              <td>{{ wizard.getStateControllerByName('source').getFormattedStartTime() | localizeDate:'time' }}</td>
            </tr>
            <tr ng-if="(wizard.getStateControllerByName('source').getUserEntries().type === 'SCHEDULE_MULTIPLE')
                && wizard.getStateControllerByName('source').getUserEntries()[wizard.getStateControllerByName('source').getUserEntries().type].end.date">
              <td translate="EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.END_DATE"><!-- End Date --></td>
              <td>{{ wizard.getStateControllerByName('source').getUserEntries().SCHEDULE_MULTIPLE.end.date | localizeDate:'dateRaw' }}</td>
            </tr>
            <tr ng-if="wizard.getStateControllerByName('source').getUserEntries()[wizard.getStateControllerByName('source').getUserEntries().type].end.hour !== undefined">
              <td translate="EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.END_TIME"><!-- End Time --></td>
              <td>{{ wizard.getStateControllerByName('source').getFormattedEndTime() | localizeDate:'time' }}</td>
            </tr>
            <tr ng-if="wizard.getStateControllerByName('source').getUserEntries()[wizard.getStateControllerByName('source').getUserEntries().type].repetitionOption">
              <td translate="EVENTS.EVENTS.NEW.SOURCE.SCHEDULE_MULTIPLE.REPEAT_ON"><!-- Repeat On --></td>
              <td>{{ wizard.getStateControllerByName('source').getUserEntries().SCHEDULE_MULTIPLE.repetitionOption }}</td>
            </tr>
            <tr ng-if="!isEmpty(wizard.getStateControllerByName('source').getUserEntries()[wizard.getStateControllerByName('source').getUserEntries().type].weekdays)">
              <td translate="EVENTS.EVENTS.NEW.SOURCE.SCHEDULE_MULTIPLE.WEEKDAYS"><!-- Weekdays --></td>
              <td>{{ wizard.getStateControllerByName('source').getUserEntries().SCHEDULE_MULTIPLE.presentableWeekdays }}</td>
            </tr>
            <tr ng-if="wizard.getStateControllerByName('source').getUserEntries()[wizard.getStateControllerByName('source').getUserEntries().type].duration.hour !== undefined">
              <td translate="EVENTS.EVENTS.NEW.SOURCE.DATE_TIME.DURATION"><!-- Duration --></td>
              <td>{{ wizard.getStateControllerByName('source').getFormattedDuration() }}</td>
            </tr>
            <tr ng-if="wizard.getStateControllerByName('source').getUserEntries()[wizard.getStateControllerByName('source').getUserEntries().type].device.name">
              <td translate="EVENTS.EVENTS.NEW.SOURCE.PLACEHOLDER.LOCATION"><!-- Location --></td>
              <td>{{ wizard.getStateControllerByName('source').getUserEntries()[wizard.getStateControllerByName('source').getUserEntries().type].device.name }}</td>
            </tr>
            <tr ng-repeat="(key, value) in wizard.getStateControllerByName('source').getUserEntries()[wizard.getStateControllerByName('source').getUserEntries().type].device.inputMethods">
              <td>{{ 'EVENTS.EVENTS.NEW.SUMMARY.SOURCE.INPUT' | translate }} {{ key }}</td>
              <td>{{ value }}</td>
            </tr>
          </table>
        </div>
      </div>

      <div class="obj tbl-list">
        <header class="no-expand" translate="EVENTS.EVENTS.NEW.PROCESSING.CAPTION"><!-- Processing --></header>
        <table class="main-tbl">
          <tr>
            <td translate="EVENTS.EVENTS.NEW.PROCESSING.WORKFLOW"><!-- Workflow --></td>
            <td>{{ wizard.getStateControllerByName('processing').getUserEntries().title }}</td>
          </tr>
          <tr ng-repeat="(key, value) in wizard.getStateControllerByName('processing').getUserEntries().selection.configuration">
            <td>{{ key }}</td>
            <td>{{ value }}</td>
          </tr>
        </table>
      </div>
      <div class="obj tbl-list">
        <header class="no-expand" translate="EVENTS.EVENTS.NEW.ACCESS.CAPTION" ><!-- Access Policy --></header>
        <table class="main-tbl">
          <thead>
            <tr>
              <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ROLE" class="fit">
                <!-- Role -->
              </th>
              <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.READ" class="fit">
                <!-- Read -->
              </th>
              <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.WRITE" class="fit">
                <!-- Write -->
              </th>
              <th translate="EVENTS.SERIES.NEW.ACCESS.ACCESS_POLICY.ADDITIONAL_ACTIONS"
                  class="fit" ng-if="wizard.getStateControllerByName('access').hasActions">
                <!-- Additional Actions -->
              </th>
            </tr>
          </thead>
          <tr ng-repeat="policy in wizard.getStateControllerByName('access').getAllPolicies()">
            <td>{{ policy.role }}</td>
            <td class="fit"><input type="checkbox" disabled ng-model="policy.read"/></td>
            <td class="fit"><input type="checkbox" disabled ng-model="policy.write"/></td>
            <td class="fit" ng-if="wizard.getStateControllerByName('access').hasActions">
              <div ng-repeat="customAction in policy.actions.value">{{ customAction }}</div>
            </td>
          </tr>
        </table>
      </div>
    </div>
  </div>
</div>
